<template>
	<view style="padding-bottom: 20rpx;">
		<!-- 自定义导航栏（带搜索） -->
		<!-- #ifdef H5 -->
		<u-navbar :background="background" height="60" :is-back="false" :title="title" :border-bottom="false">
		<!-- #endif -->
			<!-- #ifndef H5 -->
			<u-navbar :background="background" :is-back="false" :title="title" :border-bottom="false">
			<!-- #endif -->
				<view class="nvavBar flex justify-center">
					<view class="nvavBar-box" :style="{height:barHeight>0?barHeight+'px':'70rpx'}">
						<!-- #ifdef H5 || APP -->
						<view @click.stop="goSearch" class="nvavBar-boxs flex align-center" style="width: 100%;">
							<u-search placeholder-color="#cccccc" disabled search-icon-color="#ff7581"
								:show-action="false" placeholder="今日正在热播" v-model="keyword"></u-search>
						</view>
						<!-- #endif -->
						<!-- #ifndef H5 || APP -->
						<view @click.stop="goSearch" class="nvavBar-boxs flex align-center"
							:style="{width: 'calc(100% - '+barWidth+'px);'}">
							<u-search placeholder-color="#cccccc" disabled search-icon-color="#ff7581"
								:show-action="false" placeholder="今日正在热播" v-model="keyword"></u-search>
						</view>
						<!-- #endif -->

					</view>
				</view>
			</u-navbar>
			<view class="bgColorTop">
				<!-- v-if="homeTypeSel != '否'" -->
				<view v-if="homeTypeSel != '否'" class="topTabs flex align-center justify-center">
					<view class="topTabs-box">
						<scroll-view class="topTabs-box-H" scroll-x="true">
							<view class="topTabs-box-H-item" @tap="typeSel(index)"
								:class="TabCur==index?'topTabsActive':''" v-for="(item,index) in typeList" :key="index">
								{{item.classificationName}}
							</view>
						</scroll-view>
					</view>
				</view>
				<!-- 轮播图 -->
				<view class="swipers flex align-center justify-center">
					<view class="swipers-box">
						<swiper class="swipers-box" :indicator-dots="false" :autoplay="true" interval="5000"
							duration="500" :circular="true">
							<swiper-item class="swipers-box" v-for="(item,index) in swiperList" :key='index'
								@tap="goPage(item.url)">
								<image :src="item.imageUrl" mode="aspectFill" style="width: 100%;height:100%;"></image>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>

			<!-- 公告 -->
			<view class="gg flex align-center justify-center" v-if="noticeList.length>0">
				<view class="gg-box flex align-center justify-between">
					<image src="../../static/images/index/ggIcon.png" mode=""></image>
					<swiper :autoplay="true" :vertical="true" :interval="4000" :circular="true" :indicator-dots="false"
						class="gg-box-swiper">
						<block v-for="(item, index) in noticeList">
							<swiper-item @tap='goMsg(item.url)'>
								<view class="gg-box-swiper-t">{{item.title}}</view>
							</swiper-item>
						</block>
					</swiper>
				</view>
			</view>
			<!-- 金刚区 -->
			<view class="centers">
				<view class="centers-cistrict flex align-center justify-center" v-if="gridList.length > 0">
					<view class="centers-cistrict-box">
						<swiper :indicator-dots="false" class="centers-cistrict-boxs" :autoplay="false" :interval="3000"
							:duration="300">
							<swiper-item v-for="(item,index) in gridList" :key="index">
								<view class="swiper-item flex align-center justify-between">
									<view class="swiper-item-s" @click="goGridList(ite)" v-for="(ite,ind) in item.child"
										:key="ind">
										<view class="swiper-item-s-img">
											<image :src="ite.imageUrl" mode="aspectFill"></image>
										</view>
										<view class="swiper-item-s-txt">
											{{ite.name}}
										</view>
									</view>
									<block v-if="item.child.length == 2">
										<view class="swiper-item-s" style="height: 0;"></view>
										<view class="swiper-item-s" style="height: 0;"></view>
										<view class="swiper-item-s" style="height: 0;"></view>
									</block>
									<block v-if="item.child.length == 3">
										<view class="swiper-item-s" style="height: 0;"></view>
										<view class="swiper-item-s" style="height: 0;"></view>
									</block>
									<block v-if="item.child.length == 4">
										<view class="swiper-item-s" style="height: 0;"></view>
									</block>

								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<recommendVideo @more="moreVideo" @video="seVideo" v-if="rmVideList.length>0" :list="rmVideList"
				title="本周热门" typeId="2" />
			<recommendVideo @more="moreVideo" @video="seVideo" v-if="phbVideoList.length>0" :list="phbVideoList"
				title="本周排行榜" typeId="1" />
			<recommendVideo @more="moreVideo" @video="seVideo" v-if="newVideList.length>0" :list="newVideList"
				title="最新热播" typeId="" />
			<!-- 视频列表 -->
			<view class="videTitle flex align-center justify-center">
				<view class="videTitle-box">
					更多短剧
				</view>
			</view>
			<view class="" style="width: 100%;margin-top: 20rpx;">
				<videoList @success="posterSuccess" :list="courseList" />
			</view>

			<u-loadmore v-if="courseList.length > 0" :status="status" />
			<empty title="暂无视频" v-if="courseList.length == 0" />
			<uni-popup ref="popusAuthorization" type="center" :maskClick="false">
				<view class="contentview">
					<view class="title">隐私保护指引</view>
					<view class="des" @click="openPrivacyContract">
						在使用当前小程序服务之前，请仔细阅读<text
							style="color: #5074FF;">{{privacyContractName}}</text>。如你同意{{privacyContractName}}，请点击“同意”开始使用。
					</view>
					<view class="btns">
						<button class="item reject" @click="exitMiniProgram">拒绝</button>
						<button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization"
							@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
					</view>
				</view>
			</uni-popup>
			<!-- 会员助力 -->
			<u-popup v-model="showjl" :closeable="true" close-icon-color="#ffffff" mode="center">
				<view class="zl" @click="goZl()">
					<image class="zl-bg"
						src="https://duanju.xianmxkj.com/file/uploadPath/2023/12/14/adf37beca97826d44970d20118f88e29.png"
						mode=""></image>
					<view class="zl-title">
						会员免费领
					</view>
					<view class="zl-titlef">
						免费领会员
					</view>
					<view class="zl-titlef2">
						助力中...
					</view>
					<view class="zl-titlebtn">
						立即领取
					</view>
				</view>
			</u-popup>
			<!-- 新人红包 -->
			<u-popup v-model="xxPopu" :closeable="false" close-icon-color="#ffffff" mode="center">
				<view class="zl" style="height: 580rpx;" @click="saveNewUser()">
					<image class="zl-bgs"
						src="https://duanju.xianmxkj.com/file/uploadPath/2024/02/22/cee2fcdc4c4ebe31ab4ce2c3c3a3d183.png"
						mode=""></image>
					<view class="zl-titles">
						{{xxJDNum}} <text>金豆</text>
					</view>
				</view>
			</u-popup>
			<!-- 活动悬浮入口 -->
			<activityComp v-if="showzl && showzls" @clickCloseHd="clickCloseHd" @setImgs="goZl()" />
			<!-- 追剧悬浮 -->
			<drag-button v-if="shodrag && shodrags" @clickClose="clickClose" :videoInfo="videoInfo" :isDock="true"
				:existTabBar="true" @btnClick="btnClick" />
	</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	import videoList from '../../components/videoList/videoList.vue'
	import recommendVideo from '../../components/recommendVideo/recommendVideo.vue'
	import activityComp from '../../components/activityComp/activityComp.vue'
	import dragButton from "@/components/drag-button/drag-button.vue";
	export default {
		components: {
			videoList,
			empty,
			recommendVideo,
			activityComp,
			dragButton
		},
		data() {
			return {
				showzls: true,
				shodrags: true,
				shodrag: false, //是否显示拖拽悬浮
				background: {
					backgroundImage: 'linear-gradient(to right, #FFE5EA 0%, #E4F5FB 49%, #FFF0EE 100%)'
				},

				title: '',
				showzl: false, //悬浮助理图标
				showjl: false, //显示助力弹窗
				status: 'loadmore',
				swiperList: [], //轮播图列表
				noticeList: [], //公告列表
				keyword: '',
				gridList: [], //获取金刚区类表
				status: 'loadmore',
				limit: 10,
				page: 1,
				pages: 1,
				courseList: [], //视频列表
				privacyContractName: '',
				bgImg: '',
				tuiguang: '',
				qdCodeion: '', //渠道码
				qdCode: '',
				xxPopu: false,
				xxJDNum: 0,
				typeList: [],
				TabCur: 0,
				homeTypeSel: '否',
				barWidth: 0, //胶囊宽度
				barHeight: 0, //胶囊高度
				rmVideList: [], //热门视频
				phbVideoList: [], //排行榜视频
				newVideList: [], //最新热播
				videoInfo: [],
			};
		},
		onShareAppMessage(res) {
			return {
				path: '/pages/index/index?invitation=' + this.invitationCode + '&qdCode=' + this
					.qdCode, //这是为了传参   onload(data){let id=data.id;} 
				title: this.tuiguang,
				imageUrl: this.bgImg
			}
		},
		onShareTimeline(res) {
			return {
				path: '/pages/index/index?invitation=' + this.invitationCode + '&qdCode=' + this
					.qdCode, //这是为了传参   onload(data){let id=data.id;} 
				title: this.tuiguang,
				imageUrl: this.bgImg
			}
		},
		onLoad(options) {

			// barWidth
			// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-KUAISHOU
			// 获取胶囊按钮位置信息
			const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
			//获取小程序胶囊的宽度
			this.barWidth = menuButtonInfo.width
			this.barHeight = menuButtonInfo.height

			// #endif

			console.log(options, '22222222222222222')
			if (uni.getStorageSync('qdCode')) {
				this.qdCode = uni.getStorageSync('qdCode')
			}
			// #ifdef MP-WEIXIN
			let that = this
			try {
				wx.getPrivacySetting({
					success: res => {
						console.log("是否需要授权：", res.needAuthorization, "隐私协议的名称为：", res.privacyContractName)
						if (res.needAuthorization) {
							that.privacyContractName = res.privacyContractName;
							that.$refs.popusAuthorization.open();
						}
					},
					fail: () => {},
					complete: () => {},
				})
			} catch (e) {
				//TODO handle the exception
			}
			// #endif
			this.getBgImg()
			this.getTypeList();
			this.invitationCode = uni.getStorageSync('invitationCode')
			// #ifdef MP-WEIXIN
			if (options.scene) { //这里为线上操作
				//此处的二维码  page/index/index?brokerId=123
				let scene = decodeURIComponent(options.scene);
				scene = scene.split(',')
				uni.setStorageSync('invitation', scene[0])
				//小程序获取到的qdCode
				if (scene[1]) {
					uni.setStorageSync('qdCodeion', scene[1])
				}
			}

			// #endif
			if (options.invitation) {
				uni.setStorageSync('invitation', options.invitation)
			}
			//设置从链接获取到的qdCode
			if (options.qdCode) {
				uni.setStorageSync('qdCodeion', options.qdCode)
			}
			if (uni.getStorageSync('token')) {
				this.$Request.get('/app/common/type/813').then(res => {
					if (res.code == 0 && res.data.value) {
						if (res.data.value == '是') {
							this.getActivity()
						}
					}
				})
			}

		},
		onShow() {
			//本周热门
			this.getrecomVideo('2')
			//本周排行榜
			this.getrecomVideo('1')
			//最新
			this.getrecomVideo('')
			this.getBannerList()
			this.getMsg()
			this.getGardList()
			this.page = 1
			this.getCourseList()
			this.homeTypeSel = uni.getStorageSync('homeTypeSel') ? uni.getStorageSync('homeTypeSel') : '否'
			//#ifdef H5
			let that = this
			this.$u.get('/app/common/type/108').then(res => { //// 是否开启公众号自动登陆 108
				if (res.code == 0 && res.data) {
					if (res.data.value == '是') {
						let ua = navigator.userAgent.toLowerCase();
						if (ua.indexOf('micromessenger') !== -1) {
							let openid = uni.getStorageSync('openId');
							let userId = uni.getStorageSync('userId');
							if (userId) {
								if (!openid) {
									if (window.location.href.indexOf('?code=') !== -1 || window.location.href
										.indexOf(
											'&code=') !==
										-1) {
										let code;
										if (window.location.href.indexOf('?code=') !== -1) {
											code = window.location.href.split('?code=')[1].split('&')[0];
										} else {
											code = window.location.href.split('&code=')[1].split('&')[0];
										}
										if (userId) {
											that.$u.get('/app/user/openId/' + code + '/' + userId).then(
												res => {
													uni.setStorageSync('openId', res.data)
												});
										}
									} else {
										window.location.href =
											'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
											that.$queue.getWxAppid() +
											'&redirect_uri=' +
											window.location.href.split('#')[0] +
											'&response_type=code&scope=snsapi_userinfo#wechat_redirect';
									}
								}
							}
						}
					}
				}
			});
			//#endif
			if (uni.getStorageSync('token')) {
				this.getMyLoveVideo()
				this.$Request.get('/app/common/type/813').then(res => {
					if (res.code == 0 && res.data.value) {
						if (res.data.value == '是') {
							this.getActivitys()
						}
					}
				})
				//新用户红包	837
				this.$Request.get('/app/common/type/837').then(res => {
					if (res.code == 0 && res.data.value) {
						this.xxJDNum = res.data.value;
						this.checkNewUser()
					}
				})
			} else { //没有登录隐藏悬浮与弹窗
				this.showzl = false
				this.shodrag = false
				this.videoInfo = []
			}
		},
		onReachBottom() {
			if (this.page < this.pages) {
				this.page += 1
				this.status = 'loading'
				this.getCourseList()
			} else {
				this.status = 'nomore'
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.getCourseList()
		},
		methods: {
			// 获取活动等级
			getActivitys() {
				this.$Request.getT('/app/invite/selectInviteAwardByUserId').then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.showzl = true
						}
					}
				})
			},
			//关闭活动入口
			clickCloseHd() {
				// this.showzl = false
				this.showzls = false
			},
			//悬浮去看视频
			btnClick(item) {
				uni.navigateTo({
					url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item.courseDetailsId +
						'&tt_album_id=' + item.dyCourseId + '&tt_episode_id=' + item
						.dyEpisodeId
				})
			},
			//关闭悬浮
			clickClose() {
				// this.shodrag = data
				this.shodrags = false
			},
			//获取我的收藏的短剧
			getMyLoveVideo() {
				let data = {
					page: 1,
					limit: 1,
					classify: 1
				}
				this.$Request.getT('/app/courseCollect/selectByUserId', data).then(res => {
					if (res.code == 0) {
						this.videoInfo = res.data.records
						if (this.videoInfo.length > 0) {
							this.shodrag = true
						}
					}
				})
			},
			// 查看更多
			moreVideo(item) {
				console.log(item)
				let title = ''
				if (item == 2) {
					title = '本周热门'
					uni.navigateTo({
						url: '/pages/index/course/courseList?title=' + title + '&sort=' + item
					})
				} else if (item == 1) {
					title = '本周排行榜'
					uni.navigateTo({
						url: '/pages/index/course/courseList?title=' + title + '&sort=' + item
					})
				} else {
					title = '最新热播'
					uni.navigateTo({
						url: '/pages/index/course/courseList?title=' + title
					})
				}
			},
			//查看视频
			seVideo(item) {
				uni.navigateTo({
					url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item.courseDetailsId +
						'&tt_album_id=' + item.dyCourseId + '&tt_episode_id=' + item
						.dyEpisodeId
				})
			},
			//获取推荐视频
			getrecomVideo(sort) {
				let data = {
					page: 1,
					limit: 3,
					sort: sort,
					classifyId: ''
				}
				// #ifdef MP-WEIXIN
				data.wxShow = 1
				// #endif
				// #ifdef MP-TOUTIAO
				data.dyShow = 1
				// #endif
				this.$Request.getT('/app/course/selectCourse', data).then(res => {
					if (res.code == 0) {
						if (Number(sort) == 2) { //本周热门
							this.rmVideList = res.data.list
						} else if (Number(sort) == 1) { //本周排行榜
							this.phbVideoList = res.data.list
						} else { //最新热播
							this.newVideList = res.data.list
						}
					}
				})
			},
			getTypeList() {
				this.$Request.getT('/app/courseClassification/queryClassification').then(res => {
					if (res.code == 0) {
						let fenlei = {
							classificationId: 0,
							classificationName: "热门"
						}
						this.typeList = [];
						this.typeList.push(fenlei);
						res.data.forEach(d => {
							this.typeList.push(d);
						});
						// console.log(JSON.stringify(this.typeList))
					}
				});
			},
			typeSel(index) {
				this.TabCur = index;
				this.page = 1
				this.getCourseList()
			},
			checkNewUser() {
				this.$u.api.userinfo().then(res => {
					if (res.code == 0 && res.data) {
						if (res.data.isNewUser && res.data.isNewUser == 1) {} else {
							this.xxPopu = true;
						}
					}
				})
			},
			saveNewUser() {
				this.$Request.postT('/app/user/getNewUserRed').then(res => {
					if (res.code == 0) {
						this.xxPopu = false;
						this.$queue.showToast('领取成功，金豆已到账！');
					} else {
						this.$queue.showToast(res.msg)
					}
				})
			},
			// 获取活动等级
			getActivity() {
				this.$Request.getT('/app/invite/selectInviteAwardByUserId').then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.showjl = true
						}
					}
				})
			},
			//去助力页面
			goZl() {
				uni.navigateTo({
					url: '/me/assistance/assistance'
				})
				this.showjl = false
			},
			// 打开隐私协议页面
			openPrivacyContract() {
				let that = this;
				wx.openPrivacyContract({
					fail: () => {
						that.$queue.showToast('遇到错误无法打开！');
					}
				})
			},
			// 拒绝隐私协议
			exitMiniProgram() {
				// 直接退出小程序
				wx.exitMiniProgram()
			},
			// 同意隐私协议
			handleAgreePrivacyAuthorization() {
				this.$refs.popusAuthorization.close();
			},
			//获取背景图
			getBgImg() {
				this.$u.get('app/banner/selectBannerList?classify=5').then(res => {
					if (res.code == 0) {
						this.bgImg = res.data[0].imageUrl
						this.tuiguang = res.data[0].describes
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				});
			},
			//点击回调
			posterSuccess(item) {
				uni.navigateTo({
					url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item.courseDetailsId +
						'&tt_album_id=' + item.dyCourseId + '&tt_episode_id=' + item
						.dyEpisodeId
				})
			},
			// 获取资源列表
			getCourseList() {
				let typeId = '';
				if (this.TabCur != 0) {
					typeId = this.typeList[this.TabCur].classificationId;
				}
				let data = {
					limit: this.limit,
					page: this.page,
					sort: '',
					classifyId: typeId
				}
				// #ifdef MP-WEIXIN
				data.wxShow = 1
				// #endif
				// #ifdef MP-TOUTIAO
				data.dyShow = 1
				// #endif
				this.$Request.getT('/app/course/selectCourse', data).then(res => {
					uni.stopPullDownRefresh()
					if (res.code == 0) {
						this.pages = res.data.totalPage
						if (this.page < this.pages) {
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
						if (this.page == 1) {
							this.courseList = res.data.list
						} else {
							this.courseList = [...this.courseList, ...res.data.list]
						}
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
					uni.stopPullDownRefresh();

				})
			},
			//切换类型
			selectTabs(index) {
				this.current = index
				this.page = 1

				this.getCourseList()
			},
			// 跳转资源列表
			goGridList(e) {
				uni.navigateTo({
					url: e.url
				})
			},
			//处理分割金刚区
			processArray(arr) {
				let arr2 = [];
				let child = [];
				for (let i = 0; i < arr.length; i++) {
					child.push(arr[i]);

					if (child.length === 5) {
						arr2.push({
							child: child
						});
						child = [];
					}
				}
				// 如果arr数组的长度不是5的倍数，将剩余的元素添加到arr2数组的最后一个child中
				if (child.length > 0) {
					arr2.push({
						child: child
					});
				}

				return arr2;
			},
			// 获取金刚区列表
			getGardList() {
				this.$u.api.bannerList({
					classify: '2',
				}).then(res => {
					if (res.code == 0) {
						let arr = []
						res.data.forEach(ret => {
							if (ret.state == 1) {
								arr.push(ret)
							}
						})
						this.gridList = this.processArray(arr)
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},
			// 跳转搜索
			goSearch() {
				uni.navigateTo({
					url: '/pages/index/search/index'
				});
			},
			// 跳转公告链接
			goMsg(e) {
				if (url.indexOf('/pages/') !== -1 || url.indexOf('/me/') !== -1) {
					uni.navigateTo({
						url
					});
				} else {
					//#ifndef H5
					uni.navigateTo({
						url: '/pages/index/webView?url=' + url
					});
					//#endif
					//#ifdef H5
					window.location.href = url;
					//#endif	
				}
			},
			//轮播图跳转
			goPage(url) {
				let token = uni.getStorageSync('token')
				if (token) {
					if (url) {
						if (url.indexOf('/pages/') !== -1 || url.indexOf('/me/') !== -1) {
							uni.navigateTo({
								url
							});
						} else {
							//#ifndef H5
							uni.navigateTo({
								url: '/pages/index/webView?url=' + url
							});
							//#endif
							//#ifdef H5
							window.location.href = url;
							//#endif	
						}
					}
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			// 公告
			getMsg() {
				let data = {
					page: 1,
					limit: 100,
					state: 1
				}
				this.$u.api.msg(data).then(res => {
					if (res.code == 0) {
						this.notice = res.data.list
						res.data.list.forEach(res => {
							this.noticeList.push(res)
						})
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},
			// 获取轮播图列表
			getBannerList() {
				this.$u.api.bannerList({
					classify: '1'
				}).then(res => {
					if (res.code == 0) {
						res.data.forEach(d => {
							if (d.state == 1) {
								this.swiperList.push(d)
							}
						})

					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	/deep/.u-mode-center-box {
		background-color: transparent !important;
	}

	/deep/.u-navbar-inner {
		/* #ifdef H5 */
		background: linear-gradient(to right, #FFE5EA 0%, #E4F5FB 49%, #FFF0EE 100%);
		/* #endif */
	}

	.videTitle {
		width: 100%;
		height: auto;
		margin-top: 30rpx;

		.videTitle-box {
			width: 686rpx;
			height: 100%;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
	}

	.nvavBar {
		width: 750rpx;
		height: 100%;



		.nvavBar-box {
			width: 686rpx;
			height: 70rpx;
		}

		.nvavBar-boxs {
			height: 100%;
			background-color: #ffffff;
			border-radius: 44rpx;
		}
	}

	.zl {
		width: 518rpx;
		height: 556rpx;
		position: relative;
		background: transparent;

		.zl-bg {
			width: 518rpx;
			height: 556rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.zl-bgs {
			width: 518rpx;
			height: 580rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.zl-title {
			position: absolute;
			top: 15%;
			left: 46%;
			transform: translate(-50%, 100%);
			font-size: 44rpx;
			font-weight: bold;
			color: #F24364;
			background: linear-gradient(0deg, #FF5878 0.390625%, #F30931 100%);
			background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.zl-titles {
			position: absolute;
			top: 24%;
			left: 50%;
			transform: translate(-50%, 100%);
			font-size: 70rpx;
			font-weight: bold;
			background: #FFFFFF;
			background-clip: text;
			-webkit-text-fill-color: transparent;

			text {
				font-size: 30rpx;
				margin-left: 10rpx;
			}
		}

		.zl-titlef {
			font-size: 14rpx;
			font-weight: bold;
			color: #ffffff;
			position: absolute;
			top: 41%;
			right: 35%;
		}

		.zl-titlef2 {
			font-size: 14rpx;
			font-weight: bold;
			color: #ffffff;
			position: absolute;
			top: 48%;
			left: 22%;
		}

		.zl-titlebtn {
			font-size: 34rpx;
			font-weight: bold;
			background: linear-gradient(0deg, #FF5878 0.390625%, #F30931 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			position: absolute;
			bottom: 10%;
			left: 50%;
			transform: translate(-65%, 50%);
		}
	}

	.topTabsActive {
		color: #FF7581 !important;
		font-size: 30rpx !important;
		font-weight: bold !important;
		background-color: #FFE6E9 !important;
	}

	.bgColorTop {
		width: 100%;
		background: #ffffff;
		position: relative;
	}

	.bgColorTop::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to right, #FFE5EA 0%, #E4F5FB 49%, #FFF0EE 100%);
		z-index: 1;
		/* 确保在垂直渐变之上 */
	}

	.bgColorTop::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to bottom, transparent, #ffffff);
		/* 垂直渐变，结束颜色为透明 */
		z-index: 2;
		/* 确保在水平渐变之上 */
	}

	.topTabs {
		width: 100%;
		height: auto;
		position: relative;
		z-index: 3;
		// padding-top: 10rpx;
		margin-bottom: 20rpx;

		.topTabs-box {
			width: 686rpx;
			height: 100%;
		}

		.topTabs-box-H {
			white-space: nowrap;
			width: 100%;
		}

		.topTabs-box-H-item {
			display: inline-block;
			background-color: #F8F4F4;
			margin-right: 36rpx;
			color: #666666;
			font-size: 28rpx;
			padding: 10rpx 30rpx;
			border-radius: 44rpx;
		}
	}

	.swipers {
		width: 100%;
		height: auto;
		position: relative;
		z-index: 3;

		.swipers-box {
			width: 686rpx;
			height: 270rpx;
			border-radius: 24rpx;
		}


	}

	.search {
		width: 100%;
		height: auto;

		.search-box {
			width: 686rpx;
			height: 70rpx;
			border-radius: 35rpx;
			background-color: red;
		}
	}

	.gg {
		width: 100%;
		height: auto;
		margin-top: 20rpx;

		.gg-box {
			width: 686rpx;
			height: 62rpx;
			background-color: #FFF2F4;
			border-radius: 32rpx;
			padding: 0 30rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.gg-box-swiper {
			width: calc(100% - 56rpx);
			height: 100%;
		}

		.gg-box-swiper-t {
			width: 100%;
			height: 100%;
			color: #FD4F65;
			line-height: 62rpx;
			font-size: 26rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.centers {
		width: 100%;
		height: auto;
		border-radius: 60rpx 60rpx 0 0;

		.centers-cistrict {
			width: 100%;
			height: 160rpx;
			// height: 216rpx;
			// margin-top: 24rpx;

			.centers-cistrict-box {
				width: 686rpx;
				height: 100%;
				// background-color: #ffffff;
				// border-radius: 24rpx;

			}

			.centers-cistrict-boxs {
				width: 100%;
				height: 100%;

				border-radius: 24rpx;
			}

			.swiper-item {
				width: 100%;
				height: 125rpx;
				margin-top: 20rpx;
				// margin-top: 30rpx;
				// padding: 0 20rpx;
			}

			.swiper-item-s {
				width: calc(100% / 5 - 30rpx);
				height: 100%;
			}

			.swiper-item-s-img {
				width: 94rpx;
				height: 94rpx;
				margin: 0 auto;

				image {
					width: 100%;
					height: 94rpx;
				}
			}

			.swiper-item-s-txt {
				width: 100%;
				text-align: center;
				margin-top: 10rpx;
				color: #333333;
				font-size: 26rpx;
				margin-top: 10rpx;
			}
		}
	}

	.contentview {
		width: 632rpx;
		padding: 48rpx;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 16rpx;
	}

	.contentview .title {
		text-align: center;
		color: #333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.contentview .des {
		font-size: 26rpx;
		color: #666;
		margin-top: 40rpx;
		text-align: justify;
		line-height: 1.6;
	}

	.contentview .des .link {
		color: #5074FF;
		text-decoration: underline;
	}

	button::after {
		border: none;
	}

	.btns {
		margin-top: 48rpx;
		display: flex;
	}

	.btns .item {
		justify-content: space-between;
		width: 244rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 16rpx;
		box-sizing: border-box;
		border: none;
	}

	.btns .reject {
		background: #f4f4f5;
		color: #909399;
	}

	.btns .agree {
		background: #5074FF;
		color: #ffffff;
	}
</style>